<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="../js/angular.js" ></script>
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		<title></title>
		<link rel="stylesheet" href="../css/font-awesome/css/font-awesome.css">
	</head>

	<body ng-app="app" >
		<newlist title="控制器" color="red" fontSize="19px" ></newlist>
		<newlist title="控制器" color="green" fontSize="26px" ></newlist>
		<newlist title="控制器" color="blue" fontSize="10px" ></newlist>
		<script>
			var app=angular.module("app",[]);
			app.directive("newlist",function () {
				return {
					restrict:"E",//a attr e element c class
					scope:{
					    title:"@"
					},
					template:'<div></div>',
					link:function (scope, elemt, attr) {
						$(elemt).css({color:attr.color,fontSize:attr.fontsize}).html(scope.title);
                    }
				};
			});
		</script>
	</body>
</html>
